<template>

	<view :class="['slit_details','clearfix', showBulletFrame? 'hiddY':'']"  >
		<!-- 轮播图 -->
	<!-- 	<view class="swiper">
			<mosowe-swiper :lists="imgList" :touchable="false" indicator="dots" imageKey="image" previewImage pyramid
			 pyramidMargin="90rpx" />
		</view> -->
		<!-- 详情 -->
		<view class="slit_con">
			<image src="../../static/image/xiangmu@2x.png" mode=""></image>
			<span @click="showPtion">站点设备简介</span>
			<image class="selection_img" v-show="!showSescription" src="../../static/image/down@2x.png"></image>
			<image class="selection_img" v-show="showSescription" src="../../static/image/up@2x.png"></image>

			<view class="slit_con_lis" v-show="showSescription">
				<text>{{staSescription || '暂无数据'}}</text>
			</view>
		</view>
		<view class="root" v-show="filterData[0].length > 0">
		    <ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
		    @onSelected='onSelected' @dateChange='dateChange' :isChanges="isChanges"></ren-dropdown-filter>
		</view>

		<!-- 下方曲线图 -->
		<view class="graph">
			<view class="graph_tit">
				<view class="graph_fl">
					<image src="../../static/image/home_1_three@2x.png" mode=""></image> 折线图
				</view>
				<view class="graph_fr">
					<text @click="graphTime(0)" :class="currGraphIndex == 0? 'curr_graph': ''">近七天</text>
					<text @click="graphTime(1)" :class="currGraphIndex == 1? 'curr_graph': ''">全部</text>
				</view>
			</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
			 disable-scroll=true @touchend="touchEndLineA"></canvas>
		</view>
		<!-- 下方柱状图 -->
		<view class="graph">
			<view class="graph_tit">
				<view class="graph_fl">
					<image src="../../static/image/home_1_three@2x.png" mode=""></image> 柱状图
				</view>
				 
			</view>
			<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchLineB" @touchmove="moveLineB"
			 disable-scroll=true @touchend="touchEndLineB"></canvas>
		</view>



		<!-- 运行管理 -->
		<view class="management">
			<view class="ment_top">
				<image src="../../static/image/home_1_four@2x.png" mode=""></image>
				<text>运行管理</text>
			</view>
			<view class="ment_con">
				<view class="ment_con_item" @click="goToNewPage('1')">
					<image src="../../static/image/four_one@2x.png" mode=""></image>
					<text>参数一览表</text>
				</view> 
				<view class="ment_con_item" @click="goToNewPage('2')">
					<image src="../../static/image/jilu@2x.png" mode=""></image>
					<text>数据报表</text>
				</view>
				<view class="ment_con_item" @click="goToNewPage('3')">
					<image src="../../static/image/jilu@2x.png" mode=""></image>
					<text>历史报表</text>
				</view>
				<view class="ment_con_item" @click="goToNewPage('4')">
					<image src="../../static/image/four_two@2x.png" mode=""></image>
					<text>添加井号</text>
				</view>
			</view>
		</view>
		
		<!-- 弹框 -->
		<BulletFrame :showBulletFrame="showBulletFrame" :goAnalysis="goAnalysis" :equipment="equipment"/> 
	</view>
</template>

<script>
	import uCharts from '@/components/charts/u-charts.js'
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import BulletFrame from '@/components/bullet-frame/index.vue'
	var _self;
	var canvaLineA = null;
	var canvaLineB = null;
	export default {
		components: {
			RenDropdownFilter,
			BulletFrame
		},
		data() {
			return {
				// 轮播图
				imgList: [],
				// 站点数据
				staSescription: '',
				// 是否展示
				showSescription: false,
				// 当前id
				currentId: '',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {},
				// 设备id
				equipment: '',
				// 当前滚动位置
				currScroll: '',
				timeOut: 0,
				// 颜色数组
				// colorList: ['red', 'green', 'blue', 'brown', 'black', 'purple'] 
				filterData: [[]],
				defaultIndex: [0],
				well:'',
				isChanges: true,
				// 是否显示弹框
				showBulletFrame: false,
				currGraphIndex: 0,
			};
		},
		onLoad(option) {
			this.equipment = option.id
			this.getStationInfo(this.equipment)
			this.stationObject(this.equipment)
			this.getAllWell(this.equipment)
		},
		mounted() {
			this.getSlidelist()
			this.getStationObject(new Date().getDate())
		},

		methods: {
			// 站点详情
			getStationInfo(id) {
				let that = this
				that.$http({
					url: '/wxapi/PowerApi/getStationInfo',
					data: {
						station_id: id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.staSescription = res.data.description
						that.currentId = res.data.id
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 曲线数据
			stationObject(id,all=false) {
				let that = this
				uni.showLoading({title: '图表生成中...'});
				that.$http({
					url: '/wxapi/PowerApi/StationObject',
					// url:'/wxapi/PowerApi/getChat',
					method: 'GET',
					data: {
						station_id: id,
						type: all? '3':'2',
						well: that.well
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						that.chartData = res.data.hour_data_all
						that.showLineA('canvasLineA', this.chartData)
						// that.canvaLineB('canvasLineB', this.chartData)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 轮播图
			getSlidelist() {
				let that = this
				that.$http({
					url: '/wxapi/slide_api/slidelist',
					data: {
						type: 1
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.imgList = res.data
					}
				})
			},
			showPtion() {
				this.showSescription = !this.showSescription
			},
			
			goToNewPage(num){
				switch(num){
					case '1':
					uni.navigateTo({
						url: `../parPreview/parPreview?id=${this.currentId}`
					})
					break;
					case '2':
					uni.navigateTo({
						url: `../meaRecord/meaRecord?id=${this.equipment}`
					})
					break;
					case '3':
					uni.navigateTo({
						url: `../historicalReport/index?id=${this.equipment}`
					})
					break;
					case '4':
					this.showBulletFrame = !this.showBulletFrame
					break; 
				}
			},
			  
			showLineA(canvasId, chartData) {
				let that = this;
				this.cWidth = uni.upx2px(720);
				this.cHeight = uni.upx2px(570);
				let qwer = [];
				for (let i in chartData.series_data) {
					qwer.push({
						"name": chartData.object_name_lists[i],
						"data": chartData.series_data[i].data,
						"type": "line",
						"style": "curve",
					})
				}
				// console.log(qwer)
				canvaLineA = new uCharts({
					$this: that,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.x_data,
					series: qwer,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						itemCount: 6,
						scrollShow: true,
						scrollAlign: 'left',
						scrollBackgroundColor: '#F7F7FF',
						scrollColor: '#DEE7F7',
					},
					yAxis: {
						disableGrid: true,
						gridColor: '#CCCCCC',
						min: 0
					},
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						// line: {
						// 	type: 'straight'
						// }
					}
				});
			},
			canvaLineB(canvasId, chartData) {
				let that = this;
				this.cWidth = uni.upx2px(720);
				this.cHeight = uni.upx2px(570);
				let qwer = [];
				for (let i in chartData.series_data) {
					qwer.push({
						"name": chartData.object_name_lists[i],
						"data": chartData.series_data[i].data,
						"type": "column",
					})
				}
				canvaLineB = new uCharts({
					$this: that,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.x_data,
					series: qwer,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						gridType: 'dash',
						itemCount: 6,
						scrollShow: true,
						scrollAlign: 'left',
						scrollBackgroundColor: '#F7F7FF',
						scrollColor: '#DEE7F7',
					},
					yAxis: {
						disableGrid: true,
						gridColor: '#CCCCCC',
						min: 0
					},
					width: this.cWidth,
					height: this.cHeight,
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			// 点击展示数据
			touchLineA(e) { 
				let that = this
				canvaLineA.scrollStart(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {

						that.getStationObject(category)

						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			getStationObject(type) {
				let that = this
				if (that.timeOut == 1) {
					return
				}
				that.timeOut = 1
				that.$http({
					url: '/wxapi/PowerApi/StationObject',
					// url:'/wxapi/PowerApi/getChat',
					method: 'GET',
					data: {
						station_id: that.equipment,
						date: type
					}
				}).then(res => {
					if (res.code == 200) {
						that.canvaLineB('canvasLineB', res.data.hour_data_all)
						that.timeOut = 0
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.timeOut = 0
					}
				})
			},
			// 点击展示数据
			touchLineB(e) {
				canvaLineB.scrollStart(e);
			},
			moveLineB(e) {
				canvaLineB.scroll(e);
			},
			touchEndLineB(e) {
				canvaLineB.scrollEnd(e);
				canvaLineB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			onSelected(res) {
				this.well = res[0][0].text
				this.isChanges = false
				this.stationObject(this.equipment)
			},
			dateChange(d) { 
				uni.showToast({
					icon: 'none',
					title: d
				})
			},
			getAllWell(id){
				let that = this
				that.$http({
					url: '/wxapi/PowerApi/getAllWell',
					data: {
						station_id: id
					},
					method: 'get'
				}).then(res => {
					if (res.code == 200) { 
						that.allWellList = res.data   
						 res.data.map((item) => { 
							 let obj = {}
							 obj.text = item.well_name,
							 obj.value = item.id
							 that.filterData[0].push(obj)
							 
						 })   
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goAnalysis(){
				this.showBulletFrame = false
			},
			// 折线图切换时间
			graphTime(type){    
				if(type){
					this.currGraphIndex = 1;
					this.stationObject(this.equipment,true)
				}else{
					this.currGraphIndex = 0
					this.stationObject(this.equipment)
				}
				  
			}
		},
	}
</script>

<style lang="less" scoped>
	.hiddY {
		overflow-y: hidden ;
	}
	.slit_details {
		height: 100%;
		background-color: #f3f5f8;

		.swiper {
			margin-top: 20rpx;
		}
		 
		.slit_con {
			position: relative;
			margin: 16rpx 0;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #2595FF;
			height: 120rpx;
			line-height: 120rpx;
			background-color: #fff;

			span {
				display: inline-block;
				width: 540rpx;
			}

			& image:nth-child(1) {
				margin-right: 40rpx;
				width: 54rpx;
				height: 54rpx;
			}

			.slit_con_lis {
				padding: 20rpx;
				position: absolute;
				left: 0;
				right: 0;
				line-height: 48rpx;
				color: #333;
				z-index: 10000;
				border: 1rpx solid #eee;
				background-color: #fff;
			}

			.selection_img {
				position: absolute;
				right: 50rpx;
				top: 48rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.graph {
			margin-top: 20rpx;
			padding: 30rpx 0;
			height: 690rpx;
			background: #fff;

			.graph_tit {
				display: flex;
				justify-content: space-between;
				height: 140rpx !important;
				padding-left: 40rpx;
				color: #333;
				font-size: 34rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-weight: 700;
				.graph_fl{
					image {
						margin-right: 40rpx;
						width: 54rpx;
						height: 54rpx;
					}
					
					text {
						margin-top: 28rpx;
						display: block;
						font-size: 24rpx;
					}
				}  
				.graph_fr{
					display: flex;
					justify-content: space-around;
					width: 400rpx; 
					text {  
						padding: 0 30rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: slategrey;
						font-size: 28rpx;
						border-radius: 20rpx;
						box-shadow: 10rpx 3rpx 20rpx rgba(0, 0, 0, 0.2), -18rpx -18rpx 30rpx rgba(255, 255, 255, 1);
						background-color: #ffffff;
					}
					.curr_graph {
						color: #2596ff;
					}
				}
			}
		}

		.management {
			margin-top: 20rpx;
			padding: 26rpx;
			height: 320rpx;
			background-color: #fff;

			.ment_top {
				margin-bottom: 70rpx;
				font-size: 34rpx;
				color: #333;
				height: 52rpx;
				line-height: 52rpx;

				image {
					margin-right: 30rpx;
					width: 52rpx;
					height: 100%;
				}
			}

			.ment_con {
				display: flex;

				.ment_con_item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					text-align: center;
					width: 220rpx;
					height: 180rpx;
					font-size: 34rpx;

					image {
						margin: 0 auto;
						width: 120rpx;
						height: 120rpx;
					}
				}
			}

		}
		.root .filter-wrapper{
			position: relative;
		}
	}
</style>
